<template>
  <div class="login bg">
    <h3>账户登录 >>></h3>
    <Form class="container" ref="formInline" :model="formInline" :rules="ruleInline">
      <FormItem prop="username">
        <i-input type="text" v-model="formInline.username" size="large">
          <Icon type="ios-person-outline" slot="prepend" />
        </i-input>
      </FormItem>
      <FormItem prop="password">
        <i-input type="password" v-model="formInline.password" size="large">
          <Icon type="ios-lock-outline" slot="prepend" />
        </i-input>
      </FormItem>
      <FormItem>
        <Checkbox v-model="auto" size="large">自动登录</Checkbox>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submit()" style="width:100%;height:50px;font-size:20px;" size="large" :laoding="loading">登录</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { login } from 'api'
export default {
  name: 'login',
  data() {
    return {
      formInline: {
        username: '',
        password: ''
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
          // {
          //   type: 'string',
          //   min: 6,
          //   message: 'The password length cannot be less than 6 bits',
          //   trigger: 'blur'
          // }
        ]
      },
      auto: true,
      loading: false
    }
  },
  methods: {
    submit() {
      this.$refs.formInline.validate(async valid => {
        if (valid) {
          this.loading = true
          let res = await login(this.formInline)
          if (res) {
            this.$store.commit('SET_USER_ID', res.id)
            sessionStorage.setItem('userId', res.id)
            this.$router.push('/user')
          } else {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style lang="stylus">
.login {
  height: 100vh;
  overflow: hidden;

  h3 {
    font-size: 26px;
    color: #fff;
    top: 21%;
    width: 385px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .container {
    width: 385px;
    height: 340px;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    padding: 50px 40px;
    box-sizing: border-box;

    .ivu-input-group-prepend {
      background: #fff;
      padding: 6px 15px;
      font-size: 22px;
      border-right: none;
    }

    .ivu-input-group-large {
      .ivu-input {
        height: 50px;
        border-left: none;
      }
    }

    .ivu-checkbox {
      color: #b11d29;
    }
  }
}
</style>
